@import 'colours';
@import 'fonts';
@import 'variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

@import 'bootstrap';

@import './fixmeunassigned.scss';

html,
body {
    height: 100%;
}

.body,
.container,
#component {
    height: 100%;
}

body {
    font-size: 0.9rem;
}

.wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    overflow-y: auto;
}

a {
    color: theme-color('secondary');

    &:hover {
        color: theme-color('info');
        text-decoration: none;
    }

    text-decoration: none;
}

.btn {
    font-size: 0.8rem;

    .spinner-border {
        vertical-align: middle;
        margin-right: 5px;
    }

    &:not(.dropdown-toggle) {
        background-position: center;
        background-repeat: no-repeat;
        border: none;
        background-color: transparent;
        padding-left: 20px;
        padding-right: 20px;
        min-width: 130px;
        font-family: Keyforge, Helvetica, sans-serif;

        &:hover {
            text-shadow: 0px 0px 6px theme-color('white');
            transition: all 0.4s ease 0s;

            background-color: transparent;
        }

        &:focus {
            background-color: transparent;
        }

        &:active {
            background-color: transparent;
        }

        &:focus:active {
            background-color: transparent;
        }
    }
}

.btn-primary {
    background-image: url('~assets/img/button-primary.png');

    &:hover {
        background-image: url('~assets/img/button-primary-hover.png');
    }

    &:focus:active {
        background-image: url('~assets/img/button-primary-hover.png');
    }
}

.btn-default {
    background-image: url('~assets/img/button-orange.png');

    &:hover {
        background-image: url('~assets/img/button-orange-hover.png');
    }

    &:focus:active {
        background-image: url('~assets/img/button-orange-hover.png');
    }
}

.btn-secondary {
    &:not(.dropdown-toggle) {
        background-image: url('~assets/img/button-orange.png');

        &:hover {
            background-image: url('~assets/img/button-orange-hover.png');
        }

        &:focus:active {
            background-image: url('~assets/img/button-orange-hover.png');
        }
    }
}

.btn-danger {
    &:not(.dropdown-toggle) {
        background-image: url('~assets/img/button-red.png');

        &:hover {
            background-image: url('~assets/img/button-red-hover.png');
        }

        &:focus:active {
            background-image: url('~assets/img/button-red-hover.png');
        }
    }
}

.btn-success {
    background-image: url('~assets/img/button-green.png');

    &:hover {
        background-image: url('~assets/img/button-green-hover.png');
    }

    &:focus:active {
        background-image: url('~assets/img/button-green-hover.png');
    }
}

.btn-stretch {
    background-size: 100% 32px;
}

.alert {
    ul {
        list-style: none;
        margin-bottom: 0;
    }
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: theme-color('primary');
}

.bg {
    background-image: url('~assets/img/bgs/keyforge.png');

    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-board-brobnar {
    background-image: url('~assets/img/bgs/brobnar.png');
}

.bg-board-dis {
    background-image: url('~assets/img/bgs/dis.png');
}

.bg-board-logos {
    background-image: url('~assets/img/bgs/logos.png');
}

.bg-board-mars {
    background-image: url('~assets/img/bgs/mars.png');
}

.bg-board-sanctum {
    background-image: url('~assets/img/bgs/sanctum.png');
}

.bg-board-shadows {
    background-image: url('~assets/img/bgs/shadows.png');
}

.bg-board-untamed {
    background-image: url('~assets/img/bgs/untamed.png');
}

.bg-board-staralliance {
    background-image: url('~assets/img/bgs/staralliance.png');
}

.bg-board-massmutation {
    background-image: url('~assets/img/bgs/massmutation.png');
}

.keyforge-font {
    font-family: 'Keyforge', serif;
}

.content {
    padding-top: $navbar-height + 5px;
}

.card {
    margin-bottom: 10px;
}

.btn-icon {
    padding: 0.375rem 0.75rem;
}

h4 {
    font-size: 0.9rem;
}

h3 {
    font-size: 1.1rem;
}

.react-bs-table-sizePerPage-dropdown {
    .btn-default {
        background-image: none;
    }
}

.rrt-message {
    background: theme-color(dark) !important;
}

.rrt-confirm {
    background: theme-color(primary) !important;
}

.clickable {
    cursor: pointer;
    cursor: hand;
}

pre {
    background-color: rgba(0, 0, 0, 0.65);
    color: theme-color(primary);
    border: none;
}
